import { offCarWs, openCarWs } from '@/api/user'
import { useMusicStore } from '@/business/music'
import { useCarStore } from '@/stores/car'
import { useElMessage } from '@/stores/elMessage'
import { i18n } from '@/utils'
import { type UploadInstance } from 'element-plus'
import { debounce } from 'lodash'
import type { Ref } from 'vue'
import { ref } from 'vue'
import { isOpenFeedback } from './useUpperControl'
export const uploadRef = ref<UploadInstance | null>(null)

//是否断开连接
export const isConnectionList: Ref<boolean[]> = ref([])

export const useCarRelevant = () => {
  // 国际化
  // const { t } = useI18n()
  // const { isOpenFeedback } = useUpperControl()
  const carStore = useCarStore()
  // const tracking = useTracking()
  // const light = useLightStore()
  const music = useMusicStore()
  // const { onClickBirdStatus } = useBirdAway()
  // const blockStore = useBlockStore()
  // const router = useRouter()
  // const configCameraStore = useConfigCameraStore()
  // const configDeviceStore = useConfigDeviceStore()
  // const carSettingDrawerVisible = ref(false)
  // onBeforeUnmount(carStatus.tryCloseWS)

  const elMessage = useElMessage()
  const handleConnectionChange = debounce(async (newValue) => {
    if (newValue) {
      await openCarWs(carStore.currentCar)
      elMessage.setElMessage(i18n.global.t('yi-lian-jie'), 'success')
    } else {
      await offCarWs(carStore.currentCar)
      elMessage.setElMessage(i18n.global.t('yi-duan-kai-lian-jie'), 'success')
    }
  }, 300)

  // interface SwitchGroup {
  //   title: string
  //   ref: Ref<boolean>
  //   disabled?: Ref<boolean> | boolean
  //   event?: (value: any) => any
  // }

  // 近灯是否开启
  // const lowLight = ref(false)

  // // 远灯是否开启
  // const highLight = ref(false)

  // //自动灯是否开启
  // const autoLight = ref(false)

  // // 近远灯映射值
  // const lightModes = {
  //   HIGHBEAM: '01',
  //   LOWBEAM: '02',
  //   AUTOBEAM: '03'
  // }

  // 切换按钮组
  // const switchGroup = computed<SwitchGroup[]>(() => [
  //   {
  //     title: t('jin-guang-deng'),
  //     ref: lowLight,
  //     event: (value: boolean) => {
  //       toggleLight(value, lightModes.LOWBEAM)
  //     },
  //     disabled: highLight.value || autoLight.value ? true : false
  //   },
  //   {
  //     title: t('yuan-guang-deng'),
  //     ref: highLight,
  //     event: (value: boolean) => {
  //       toggleLight(value, lightModes.HIGHBEAM)
  //     },
  //     disabled: lowLight.value || autoLight.value ? true : false
  //   },
  //   {
  //     title: t('zi-dong-yuan-guang-deng'),
  //     ref: autoLight,
  //     event: (value: boolean) => {
  //       toggleLight(value, lightModes.AUTOBEAM)
  //     },
  //     disabled: lowLight.value || highLight.value ? true : false
  //   }
  // ])

  // 切换近远灯相关事件
  // function toggleLight(value: boolean, mode: string) {
  //   const carStore = useCarStore()
  //   const data = {
  //     code: carStore.currentCar,
  //     param1: 1,
  //     param2: value ? mode : '00',
  //     param3: 255,
  //     param4: 255
  //   }
  //   patrolingCruise(data)
  // }

  /**
   * 各种开关按钮组件
   */
  // const Switchs = () => (
  //   <ElCard class="my-1 mr-1 w-full" shadow="always" header="车灯控制" style="--el-card-padding: 0">
  //     <div class="flex flex-col pt-1">
  //       {switchGroup.value.map((item) => (
  //         <div class="flex items-center ">
  //           <span class=" w-full text-sm">{item.title}</span>
  //           <ElSwitch
  //             size="small"
  //             v-model={item.ref.value}
  //             onChange={item.event}
  //             disabled={Boolean(item.disabled)}
  //           />
  //         </div>
  //       ))}
  //     </div>
  //   </ElCard>
  // )

  /**
   * 上装控制抽屉
   */
  // const CarRelevantDrawer = () => (
  //   <ElDrawer
  //     class="select-none"
  //     v-model={carSettingDrawerVisible.value}
  //     direction="rtl"
  //     size="20%"
  //     onClose={closeDrawer}
  //     modal={false}
  //     zIndex={-1}
  //   >
  //     <ElScrollbar>
  //       <div class="w-full ">
  //         {/* <Switchs /> */}
  //         {/* <ElDivider /> */}
  //         {/* <AlarmLightControl /> */}
  //         {/* <ElDivider /> */}
  //         {/* <FrameSwitchOver /> */}
  //         {/* <ElDivider /> */}
  //         {/* <PantiltControl /> */}
  //         {/* <ElDivider /> */}
  //         {/* <MusicControl />
  //         <ElDivider /> */}
  //         <MusicControl />
  //         {/* <BirdAwayControl /> */}
  //         {/* <ElDivider /> */}
  //         {/* <LightControl /> */}
  //         <ElDivider />
  //         <ActionScanning />
  //       </div>
  //     </ElScrollbar>
  //   </ElDrawer>
  // )

  function openFeedbackWs(val: boolean) {
    isOpenFeedback.value = val
  }

  function closeDrawer() {
    openFeedbackWs(false)
    music.isLoading = false
    // 关闭弹窗时重置上传组件的状态
    if (uploadRef.value) {
      uploadRef.value.clearFiles() // 清空上传的文件
    }
  }
  // 车辆抽屉是否可见组件
  // const CarRelevantController = () => (
  //   <ElRow gutter={20}>
  //     {/* <ElCol span={5}>
  //       <CarSelector></CarSelector>
  //     </ElCol> */}
  //     <ElCol span={19}>
  //       <div class="flex items-center ">
  //         {/* <span class="mr-2">{carStatus.NewCurrentCarStatus.value}</span> */}
  //         {/* <ElSwitch
  //           class="mx-2"
  //           v-model={isConnection.value}
  //           style="--el-switch-off-color: #ff4949"
  //           active-text={t('lian-jie')}
  //           inactive-text={t('duan-kai')}
  //           inline-prompt
  //         /> */}
  //         {/* <ElSwitch
  //           class="mx-2"
  //           modelValue={blockStore.mode}
  //           style="--el-switch-off-color: #ff4949"
  //           active-text={t('bi-zhang')}
  //           inactive-text={t('ting-zhang')}
  //           inline-prompt
  //           activeValue={'1'}
  //           inactiveValue={'2'}
  //           onChange={blockStore.changeBlockMode as any}
  //         />
  //         <span class="text-sm mx-2  text-nowrap">
  //           {t('dian-liang')}: {carStatus.NewCurrentCarBattery.value || 0}%
  //         </span>
  //         <span class="text-sm mx-2  text-nowrap">
  //           {t('che-su')}: {carStatus.NewCurrentCarSpeed.value || 0}m/s
  //         </span> */}
  //         {/* <ElButton
  //           v-permission="UpperControl"
  //           class="mx-2"
  //           size="small"
  //           onClick={() => {
  //             carSettingDrawerVisible.value = true
  //             openFeedbackWs(true)
  //             music.onClickStatus()
  //             music.onClickMusicList()
  //             onClickBirdStatus()
  //             light.onClickLightStatus()
  //             tracking.getTrackingState()
  //           }}
  //         >
  //           {t('shang-zhuang-kong-zhi')}
  //         </ElButton> */}
  //         {/* <ElButton
  //           v-permission="ConfigMonitoring"
  //           class="mx-2"
  //           size="small"
  //           onClick={() => {
  //             configCameraStore.getList()
  //             carSettingDrawerVisible.value = false
  //             router.push('/config/camera')
  //           }}
  //         >
  //           {t('pei-zhi-jian-kong')}
  //         </ElButton> */}
  //         {/* <ElButton
  //           v-permission="ConfigPeripherals"
  //           size="small"
  //           class="mx-2"
  //           onClick={() => {
  //             configDeviceStore.getList()
  //             carSettingDrawerVisible.value = false
  //             router.push('/config/device')
  //           }}
  //         >
  //           {t('pei-zhi-wai-she')}
  //         </ElButton> */}
  //         {/* <ElButton
  //           v-permission="targetTracking"
  //           class="mx-2"
  //           size="small"
  //           onClick={tracking.showDrawer}
  //         >
  //           {i18n.global.t('mu-biao-gen-zong')}
  //         </ElButton> */}
  //         {/* <ElButton
  //           size="small"
  //           class="mx-2"
  //           onClick={async () => {
  //             await getNotProcessAlarm()
  //             activeNoProcessAlarm()
  //           }}
  //         >
  //           {i18n.global.t('ji-huo-gao-jing')}
  //         </ElButton> */}
  //         {/* <ElButton
  //           size="small"
  //           class="mx-2"
  //           onClick={() => {
  //             handleEndRainAvoidance()
  //           }}
  //         >
  //           {i18n.global.t('jie-shu-bi-yu')}
  //         </ElButton>
  //         <ElButton
  //           size="small"
  //           onClick={async () => {
  //             const res: any = await endRunningLaps(carStore.currentCar, taskId.value)
  //             ElMessage.success({
  //               message: res.message
  //             })
  //             if (res.code === 200) {
  //               isRainTask.value = false
  //             }
  //           }}
  //           v-show={isRainTask.value}
  //         >
  //           {i18n.global.t('jie-shu-pao-quan')}
  //         </ElButton> */}
  //       </div>
  //     </ElCol>
  //   </ElRow>
  // )
  return {
    // CarRelevantController,
    handleConnectionChange,
    openFeedbackWs,
    closeDrawer
  }
}
